<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">

		<c-nav-bar1 title="申请退票退款"></c-nav-bar1>
		<view class="bg"></view>
		<!-- 头部 -->
		<view class="box ship_hotel">
			<text class="sh_title">订单号：{{item.orderCode}}</text>
			<view class="sh_date">
				<view class="right">
					<view class="right-title">
						{{item.goodsNameAndType}}
					</view>
					<view class="right-text">
						<span class="text">游玩日期</span>
						<span class="text1">{{item.playDateDeal}}</span>
					</view>
					<view class="right-price">
						<view class="" v-if="item.detailDto">
							游玩人数:{{item.detailDto.length}}
						</view>
						<view class="">
							合计：<span class="price">￥{{item.totalPrice}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 游客信息 -->

		<!-- <view class="kc_tip">扣除0.0%手续费,共计￥0.00</view> -->
		<!-- 退款原因 -->
		<view class="box refund">
			<text class="title">退款原因</text>
			<view class="r_item" v-for="(item,index) in refundReasons" :key="index">
				<text>{{item.title}}</text>
				<image src="https://fsy.shengsi.gov.cn/file/20240906/119a9318c011420ba8b7677bc12fbf00.png" mode="" v-if="!item.isSelect"
					@tap="selectReason(item,index)"></image>
				<image src="https://i.ringzle.com/file/20240222/ef0d5ce39fd3422692a1be8feb08e45f.png" mode="" v-else
					@tap="selectReason(item,index)"></image>
			</view>
			<view class="r_item">
				<text> 其他</text>
				<u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx"
					placeholder="选填" v-model="refundReasonOther"></u--input>
			</view>

		</view>
		<!-- 订单信息 -->
		<view class="box order">
			<text class="title">订单信息</text>
			<view class="o_item">
				<text>订单编号</text>
				<text>{{item.orderCode}}</text>
			</view>
			<view class="o_item">
				<text>下单时间</text>
				<text>{{item.orderTime}}</text>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="b_left">
				<view>预计退款：<span>￥</span><text>{{price.toFixed(2)}}</text></view>
			</view>
			<view class="b_right">
				<view class="br_mx" @tap="showMx()">
					<text>明细</text>
					<image src="@/static/my/icon_xjt.png"></image>
				</view>
				<view class="br_tk" @tap="toRefund">确认退票</view>
			</view>
		</view>
		<u-popup :show="detailsShow" @close="detailsShow=false">
			<view class="details">
				<view class="title">
					<text>费用明细</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="detailsShow=false"></image>
				</view>
				<view class="d_item">
					<text>订单金额</text>
					<text>￥{{price}}</text>
				</view>
				<view class="d_item">
					<text>退款手续费</text>
				</view>
				<view class="d_item2">
					<text>扣除0.0%</text>
					<text>￥0.00</text>
				</view>
				<view class="d_item yjtk">
					<text>预计退款</text>
					<text class="red">￥{{price}}</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="confrimShow" @close="confrimShow=false">
			<view class="details">
				<view class="title">
					<text>申请退票</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="confrimShow=false"></image>
				</view>
				<view class="c_alert">
					您确定要退票吗？确认申请退票将不可撤回，再次购买可能会因为无票，影响您的游玩！
				</view>
				<!-- <view class="c_money">
					<text>退款金额</text>
					<text>￥{{price}}</text>
				</view>
				<view class="c_memo">退款预计1-7个工作日原路退回，请耐心等待</view> -->
				<view class="c_btns">
					<view @tap="confrimShow=false">我再想想</view>
					<view @tap="confirmApply">确定申请</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'refundTicket',
		data() {
			return {
				h: uni.getWindowInfo().windowHeight - 60,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#FFFFFF"
				},
				item: {},
				week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
				passengers: [],
				refundReasons: [{
						title: '购票错误',
						isSelect: false
					},
					{
						title: '行程有变',
						isSelect: false
					},
				],
				price: 0,
				detailsShow: false,
				confrimShow: false,
				refundReason: '',
				refundReasonOther: '',
				touristList: [],
				refundList: {
					touristIds: []
				},
				queryValue: {}
			}
		},
		onLoad(option) {
			this.id = option.id || '';
			if (this.id) {
				this.getDetails(this.id);
			}

		},
		methods: {
			showMx() {
				this.detailsShow = true;
			},
			getDetails(id) {
				this.$api.get('/api/fishering/personCenterOrderDetail/' + id).then(res => {
					if (res.data.code === 0) {
						this.item = res.data.data;
						this.item.playDate = new Date(this.item.playDate).Format('yyyy-MM-dd');
						this.price = this.item.totalPrice;
					} else this.$showModal(res.data.msg)
				})
			},
			selectReason(item, index) {
				this.refundReason = item.title;
				this.refundReasons.forEach((d, i) => this.$set(this.refundReasons[i], 'isSelect', false));
				this.$set(this.refundReasons[index], 'isSelect', true);
			},
			//点击确认退款弹出提示
			toRefund() {
				if (!this.refundReason && !this.refundReasonOther) {
					return uni.showModal({
						title: '温馨提示',
						content: '请选择退款原因后,再提交申请退款',
						showCancel: false,
						confirmText: '我知道了',
						confirmColor: '#007A69'
					})
				}
				this.confrimShow = true;
			},
			//确定申请
			confirmApply() {
				this.queryValue.orderType = this.item.orderType;
				this.queryValue.orderCode = this.item.orderCode;
				this.queryValue.playTime = this.item.playTime;
				this.queryValue.playDate = this.item.playDate;
				this.queryValue.status = this.item.status;
				this.queryValue.cancelOrRefundReason = this.refundReason;
				this.queryValue.merchantId = this.item.merchantId;
				this.queryValue.boatNo = this.item.boatNo;
				console.log(this.refundList, '+++++++++++++++');
				// this.$api.post('/api/scenic/applyRefund', this.refundList).then(res => {
				// 	if (res.data.code === 0) {
				//this.confrimShow = false;
				// this.queryValue.outRefundNo = res.data.data.id
				// this.queryValue.outTradeNo = res.data.data.orderCode
				// this.queryValue.refundFee = res.data.data.realityPay
				// this.queryValue.totalFee = res.data.data.refundPrice
				this.$api.post('/scenic/api/order/refundOrder', this.queryValue).then(result => {
					console.log(result, 'resulet');
					this.confrimShow = false;
					if (result.data.code === 0) {
						this.$showToast('退款成功');
					} else {
						this.$showToast(result.data.msg);
					}
					setTimeout(() => {
						uni.redirectTo({
							url: '/pagesMy/order/index?name=渔家乐&type=0&typeIndex=5'
						})
					}, 2000)
				})
				// 	} else this.$showModal(res.data.msg)
				// })
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 140rpx;

		// .bg {
		// 	width: 100%;
		// 	height: 702rpx;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: 0;
		// }
		.bg {
			height: 700rpx;
			position: fixed;
			// top: 44px;
			// z-index: 1;
			width: 100%;
			background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA);
		}

		.box {
			width: calc(100% - 48rpx);
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 40rpx 24rpx;
			position: relative;
			box-sizing: border-box;
		}

		.ship_hotel {
			margin-top: 46rpx;

			.sh_title {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
				line-height: 36rpx;
			}

			.sh_date {
				border-top: 1rpx solid #EFEFEF;
				padding-top: 10rpx;
				margin-top: 28rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #808080;
				padding-bottom: 10rpx;

				.left {
					margin-right: 20rpx;

					.image {
						border-radius: 16rpx;
						width: 136rpx;
						height: 158rpx;


						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.right {
					width: 100%;
					height: 158rpx;

					.right-title {
						font-size: 30rpx;
						color: #333;
						font-weight: Regular;
					}

					.right-text {
						margin: 24rpx 0 30rpx;

						.text {
							font-size: 26rpx;
							color: #666;
							font-weight: Regular;
						}

						.text1 {
							font-size: 26rpx;
							color: #FEA400;
							margin-left: 30rpx;
						}
					}

					.right-price {
						display: flex;
						justify-content: space-between;

						.price {
							font-size: 28rpx;
							color: #FF4141;
							font-weight: Regular;
						}
					}
				}

				text {
					color: #FF7D01;
					margin-left: 30rpx;
				}
			}
		}

		.person_info {
			margin-top: 20rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			.pi_item {
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				padding-top: 28rpx;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;

				.pii_left {
					.piil_name {
						display: flex;
						align-items: center;

						text {
							font-size: 30rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
						}

						view {
							width: 87rpx;
							height: 36rpx;
							background: #F5F8FA;
							border-radius: 8rpx;
							line-height: 36rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #94A9C8;
							margin-left: 15rpx;
						}
					}

					.piil_idcard {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}

				.pii_right {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF4141;
				}
			}
		}

		.kc_tip {
			width: calc(100% - 60rpx);
			padding: 19rpx 30rpx 23rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF4141;
			text-indent: 30rpx;
		}

		.refund {
			margin-top: 20rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			.r_item-title {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.r_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 31rpx 0;
				border-bottom: 1rpx solid #EFEFEF;

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}

				&:last-child {
					padding-bottom: 0;
					border: none;
				}
			}
		}

		.order {
			margin-top: 20rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			.o_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;

				text {
					&:first-child {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					&:last-child {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		.bottom {
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			height: 124rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			padding-top: 16rpx;

			.b_left {
				height: 80rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF4141;
				}

				text {
					font-size: 48rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #FF4141;
				}
			}

			.b_right {
				display: flex;
				justify-content: space-between;
				height: 80rpx;

				.br_mx {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
					}
				}

				.br_tk {
					background-color: #007A69;
					width: 220rpx;
					height: 80rpx;
					// background: linear-gradient(90deg, #FF7D43 0%, #FEAC2C 100%);

					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					margin-left: 24rpx;


				}
			}
		}

		.details {
			padding: 40rpx 30rpx 64rpx;

			.title {
				position: relative;
				text-align: center;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.d_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 44rpx;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;

					&.red {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #FF4141;
					}
				}

				&.yjtk {
					margin-top: 94rpx;
				}
			}

			.d_item2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24rpx;

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}

			.c_alert {
				margin-top: 64rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.c_money {
				margin-top: 40rpx;
				width: 100%;
				height: 100rpx;
				background: #F5F8FA;
				border-radius: 5rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;

					&:last-child {
						font-weight: bold;
						color: #FF4141;
					}
				}
			}

			.c_memo {
				margin-top: 24rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.c_btns {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 144rpx;

				&>view {
					width: calc(50% - 15rpx);
					height: 88rpx;
					border-radius: 16rpx;
					border: 1rpx solid #AAAAAA;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;

					&:last-child {
						background: #007A69;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>